<template>
	<div class="page">
		<span class="jump-page" :class="[{'disabled_page':current_page==1}]" @click="change_page(1,1)">首页</span>
		<span class="jump-page" :class="[{'disabled_page':current_page==1}]" @click="change_page(-1)">上一页</span>
		<!--小于3-->
		<template v-if="current_page<=center_index || page_total<=page_arr_length">
			<span @click="change_page(item+1,true)" v-for="item in page_arr" :class="[{'active' : current_page == (item+1)}]" v-if="page_total>item" class="text-page-tag">{{item+1}}</span>
		</template>
		<!--大于3小于总数-1-->
		<template v-if="current_page>center_index && current_page<(page_total-center_index+2) && page_total > page_arr.length">
			<span @click="change_page(current_page-center_index+1+item,true)" v-for="item in page_arr" :class="[{'active' : current_page == (current_page-center_index+1+item)}]" class="text-page-tag">
				{{current_page-center_index+1+item}}
			</span>
		</template>
		<!--大于总数-1-->
		<template v-if="current_page>=(page_total-center_index+2) && page_total > page_arr.length">
			<span @click="change_page(page_total-page_arr.length+1+item,true)" v-for="item in page_arr" :class="[{'active' : current_page == (page_total+item-page_arr.length+1)}]" class="text-page-tag">
				{{page_total-page_arr.length+1+item}}
			</span>
		</template>
		
		
		<span class="jump-page" :class="[{'disabled_page':current_page==page_total}]" @click="change_page(1)">下一页</span>
		<span class="jump-page" :class="[{'disabled_page':current_page==page_total}]" @click="change_page(page_total,1)">尾页</span> 
	</div>
	<!--分页组件-->

	<!--组件结束-->
</template>

<script>
	export default {
		props: {
			isEdit: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '未填写'
			},
			page_total: {
				type: Number,
				default: 0
			},
			page_arr_length: {
				type: Number,
				default: 5
			},
			current_page_c: {
				type: Number,
				default: 1
			},
			changePage:{
				type:Function
			}
		},
		data() {
			return {
				center_index: Math.ceil(this.page_arr_length / 2),
				page_arr: [],
				current_page:this.current_page_c
			}
		},
		mounted() {
			this.page_arr = []
			for(var i = 0; i < this.page_arr_length; i++) {
				this.page_arr.push(i)
			}
		},
		methods: {
			change_page(index, isJump) {
				if(isJump) {
					this.current_page = index;
				} else if((this.current_page + index) > this.page_total || (this.current_page + index) < 0) {
					return;
				}else{
					this.current_page += index
				}
				
				if(this.changePage){
					this.changePage(this.current_page,this)
				}
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.page {
		padding: 20px 0;
		display: inline-block;
		span{
			-moz-user-select: none;
			-ms-user-select: none;
			-webkit-user-select: none;
		}
		.jump-page {
			padding: 0 6px;
			min-width: 24px;
			font-size: 15px;
			display: inline-block;
			text-align: center;
			cursor: pointer;
			&.disabled_page {
				color: #c8cdd2;
				&:hover {
					cursor: default;
				}
			}
		}
		@item_width: 32px;
		.text-page-tag {
			margin: 0 8px;
			color: #4d555d;
			border-radius: 50%;
			padding: 0 4px;
			min-width: @item_width;
			min-height: @item_width;
			line-height: @item_width;
			font-size: 14px;
			display: inline-block;
			text-align: center;
			transition: border-color .2s;
			cursor: pointer;
			&:hover {
				background: #d9dde1;
				color: #4d555d;
				text-decoration: none;
			}
			&.active {
				transform: scale(1.1);
				transition: all 0.3s;
				background: #4d555d;
				color: #fff;
				&:hover {
					background: #4d555d;
					color: #fff;
				}
			}
		}
	}
</style>